<template>
  <div class="project box-centent">
    <div class="nav-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'project' }">创客集市</el-breadcrumb-item>
        <el-breadcrumb-item>创客项目</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="nav-search">
        <el-input size="mini" placeholder="输入你要找的内容" prefix-icon="el-icon-search" v-model="search"></el-input>
      </div>
    </div>
    <div :class="['classify-box', showMore ? 'show-more' : '']">
      <div class="classify-content">
        <div class="categories">分类:</div>
        <div :class="['list', item.active?'active':'']" v-for="(item, index) in categories" :key="index" @click="changeCategories(item)">{{item.name}}</div>
      </div>
      <div class="classify-more" @click="showMore = !showMore">更多</div>
    </div>
    <div class="item">
      <div class="list">
        <el-image style="width: 280px; height: 220px; border-radius:8px" :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"></el-image>
        <div class="content">
          <div class="title">
            <div>基于车联网的自动红绿灯控制系统</div>
            <div class="category">交通运输</div>
          </div>
          <div class="text">
            城市智能交通中，有些城市的红绿灯装有信号控制系统，在所有道路资源都充分使用的条件下红绿灯的转换频率只能按时间分配，不可能让路上的车辆变少，不能合理的红绿灯配时让道路的通行率大大降低，同时会延长机动车和行人等候通行的时间降低了交通通行效率。对于当前出现的上述问题，科缔欧智能红绿灯自动控制系统采用科缔欧智能人员监测分析摄像机，可以实时监测行人数量来智能转换红绿灯…
          </div>
          <div class="more">
            <el-button type="primary" @click="goMore">了解更多</el-button>
            <div class="time">2019-06-02</div>
          </div>
        </div>
      </div>
    </div>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="10" layout="prev, pager, next, total" :total="100" background pager-count="10" hide-on-single-page>
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showMore: false,
      categories: [
        { name: '全部', type: 0, active: true },
        { name: '电商', type: 1, active: false },
        { name: '互联网', type: 2, active: false },
        { name: '农牧业', type: 3, active: false },
        { name: '金融', type: 4, active: false },
        { name: '新能源', type: 5, active: false },
        { name: '文化创意', type: 6, active: false },
        { name: '交通运输', type: 13, active: false },
        { name: '动漫电影', type: 7, active: false },
        { name: '动漫电影', type: 8, active: false },
        { name: '动漫电影', type: 9, active: false },
        { name: '动漫电影', type: 10, active: false },
        { name: '动漫电影', type: 11, active: false }
      ],
      search: ''
    }
  },
  methods: {
    changeCategories (category) {
      this.categories.forEach(item => {
        if (item.type === category.type) {
          item.active = true
        } else {
          item.active = false
        }
      })
    },
    goMore () {
      this.$router.push('/projectDetails')
    }
  }
}
</script>

<style lang="scss" scoped>
.project {
  .nav-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 18px 0;
    /deep/.el-breadcrumb {
      flex: 1;
    }
    .nav-search {
      display: flex;
      align-items: center;
      /deep/ .el-input {
        width: 85%;
        .el-input__inner {
          border-radius: 12px;
          height: 21px;
          line-height: 21px;
          padding-left: 15px;
          background: #f5f7ff;
        }
      }
      /deep/ .el-input__prefix {
        left: 115px;
        .el-icon-search {
          line-height: 21px;
        }
      }
    }
  }

  .classify-box {
    display: flex;
    align-items: flex-start;
    background: rgba(255, 255, 255, 1);
    border-radius: 8px;
    padding: 16px 28px 0px 32px;
    height: 33px;
    overflow: hidden;
    transition: all 0.5s;
    position: relative;
    .classify-content {
      flex: 1;
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      .categories {
        margin-right: 52px;
        margin-bottom: 18px;
        font-size:18px;
        color:rgba(6,17,37,1);
        font-weight: 500;
      }
      .list {
        margin-right: 52px;
        margin-bottom: 18px;
        font-size:18px;
        color:rgba(51,69,102,1);
        cursor: pointer;
        &.active {
          background-color: rgba(210,231,255,1);
          color: rgba(46,141,246,1)
        }
      }
    }
    .classify-more {
      font-size:18px;
      color:rgba(51,69,102,1);
      width: 60px;
      text-align: center;
    }
    &.show-more {
      height: auto;
    }
    &::before {
      content: '';
      position: absolute;
      top: 50px;
      left: 32px;
      right: 28px;
      border-bottom: 1px dashed #d4cdcd;
    }
  }
  .item {
    padding: 36px 0;
    .list {
      display: flex;
      justify-content: center;
      padding-bottom: 28px;
      border-bottom: 1px solid #979797;
      .content {
        flex: 1;
        margin-left: 20px;
        .title {
          display: flex;
          align-items: center;
          font-weight: 900;
          font-size: 18px;
          color: rgba(19, 35, 64, 1);
          margin-bottom: 11px;
          .category {
            padding: 0px 12px;
            border-radius: 18px;
            border: 1px solid rgba(254, 82, 98, 1);
            font-size: 16px;
            color: rgba(254, 82, 98, 1);
            margin-left: 20px;
          }
        }
        .text {
          font-size: 16px;
          color: rgba(51, 69, 102, 1);
          line-height: 30px;
          margin-bottom: 21px;
        }
        .more {
          display: flex;
          align-items: center;
          /deep/.el-button {
            padding: 8px 18px;
          }
          /deep/.el-button--primary {
            background: linear-gradient(
              135deg,
              rgba(91, 192, 251, 1) 0%,
              rgba(46, 141, 246, 1) 100%
            );
          }
          .time {
            flex: 1;
            text-align: right;
            font-size: 16px;
            color: rgba(130, 138, 153, 1);
          }
        }
      }
    }
  }
  /deep/.block {
    padding: 32px 0 48px;
    .el-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      .el-pagination__total {
        float: right;
      }
    }
    .btn-prev, .btn-next {
      border-radius: 14px;
      background: rgba(148, 148, 148, 0.5);
      .el-icon {
        color: #606266;
      }
    }
    .number {
      border-radius: 14px;
      background: none;
    }
    .btn-next {
      border-radius: 14px;
      background: rgba(148, 148, 148, 0.5);
      .btn-next:disabled {
        color: #333;
      }
    }
  }
}
</style>
